<!DOCTYPE html>
<!--
  Mariann Nagy's Google Resume.
  Author: ccalo@google.com (Chris Calo)
  -->
<html lang="en" ng-app="mknagy">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    
    <title ng-bind="content.title">Loading…</title>
    <meta name="description" content="Mariann K Nagy's resume"/>
    <meta name="author" content="ccalo@google.com (Chris Calo)"/>
    
    <!-- TODO: <link rel="shortcut icon" href="style/favicon.png"/> -->
    <link rel="stylesheet" href="/style/google-resume.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
  </head>
  <!--
    Show loading text while loading. As soon as all bootstrap work is done in
    main.js, remove the loading class.
    -->
  <body ng-class="{loading: !content}" smoothscroll>
    <data name="content" src="/content/content.yaml" type="yaml"></data>
    <div class="container">
      <div class="header">
        <div class="sidebar">
          <div class="sidebar-gutter">
            <div class="photo">
              <img ng-src="{{content.sidebar.photo.url}}" />
            </div>
            <div class="caption">
              {{content.sidebar.photo.caption}}
            </div>
            <div keepvisible>
              <nav class="project-links">
                <a class="sidebar-link" ng-repeat="project in content.projects" href="#{{project.id}}">
                  {{project.name}}
                </a>
              </nav>
              <ul class="links">
                <li ng-repeat="link in content.sidebar.links">
                  <a href="{{link.url}}" target="_blank">{{link.name}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="main">
          <div class="main-gutter">
            <h1>{{content.heading}}</h1>
            <h2>{{content.subheading}}</h2>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="main">
          <div class="main-gutter">
            <div markdown="content.bio"></div>
            
            <h3 ng-show="content.projects">Selected projects</h3>
            
            <ol class="projects" ng-show="content.projects">
              <li id="{{project.id}}" class="project" ng-repeat="project in content.projects">
                <div class="project-head">
                  <span class="time">
                    <time>{{project.dates.start}}</time>
                    &ndash;
                    <time>{{project.dates.end}}</time>
                  </span>
                  <h4>{{project.name}}</h4>
                  <ul class="tags">
                    <li ng-repeat="tag in project.tags">{{tag}}</li>
                  </ul>
                </div>
                <h5 class="headline" ng-show="project.headline">{{project.headline}}</h5>
                <a class="screenshot-container" lightbox ng-show="project.screenshot">
                  <img ng-src="{{project.screenshot}}" class="screenshot"/>
                </a>
                <div class="project-desc" markdown="project.description"></div>
                <ul class="links">
                  <li ng-repeat="link in project.links" ng-show="project.links">
                    <a href="{{link.url}}" target="_blank">{{link.name}}</a>
                  </li>
                </ul>
              </li>
            </ol>
            
            <h3>Googliness</h3>
            
            <ol class="projects" ng-show="content.googliness">
              <li id="{{project.id}}" class="project" ng-repeat="project in content.googliness">
                <div class="project-head">
                  <h4>{{project.name}}</h4>
                </div>
                <h5 class="headline" ng-show="project.headline">{{project.headline}}</h5>
                <a class="screenshot-container" lightbox ng-show="project.screenshot">
                  <img ng-src="{{project.screenshot}}" class="screenshot"/>
                </a>
                <div class="project-desc" markdown="project.description"></div>
                <ul class="links" ng-show="project.links">
                  <li ng-repeat="link in project.links">
                    <a href="{{link.url}}" target="_blank">{{link.name}}</a>
                  </li>
                </ul>
              </li>
            </ol>

            <h3>Education</h3>
            
            <ol class="projects" ng-show="content.degrees">
              <li class="project" ng-repeat="degree in content.degrees">
                <div class="project-head">
                  <span class="time">
                    <time>{{degree.dates.start}}</time>
                    &ndash;
                    <time>{{degree.dates.end}}</time>
                  </span>
                  <h4>{{degree.name}}, {{degree.school}}</h4>
                </div>
                <div class="project-desc" markdown="degree.description"></div>
                <ul class="links" ng-show="degree.links">
                  <li ng-repeat="link in degree.links">
                    <a href="{{link.url}}" target="_blank">{{link.name}}</a>
                  </li>
                </ul>
              </li>
            </ol>
          </div>
        </div>
      </div>
      
      <div class="footer">
        <div class="main">
          <div class="main-gutter" markdown="content.footer"></div>
        </div>
      </div>
    </div>
  </body>
</html>